<template>
  <div class="login">
    <div class="left-wrap">
      <LoginLeftView></LoginLeftView>
    </div>
    <div class="right-wrap">
      <div class="top-right-wrap">
        <div class="btn theme-btn" @click="toggleTheme">
          <i class="iconfont-sys">
            {{ isDark ? '&#xe6b5;' : '&#xe725;' }}
          </i>
        </div>
        <el-dropdown @command="changeLanguage" popper-class="langDropDownStyle">
          <div class="btn language-btn">
            <i class="iconfont-sys icon-language">&#xe611;</i>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <div v-for="lang in languageOptions" :key="lang.value" class="lang-btn-item">
                <el-dropdown-item :command="lang.value" :class="{ 'is-selected': locale === lang.value }">
                  <span class="menu-txt">{{ lang.label }}</span>
                  <i v-if="locale === lang.value" class="iconfont-sys icon-check">&#xe621;</i>
                </el-dropdown-item>
              </div>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div class="header">
        <ArtLogo class="icon" />
        <h1>{{ systemName }}</h1>
      </div>
      <div class="login-wrap">
        <div class="form">
          <h3 class="title">{{ $t('login.title') }}</h3>
          <p class="sub-title">{{ $t('login.subTitle') }}</p>
          <el-form ref="formRef" :model="formData" :rules="rules" @keyup.enter="handleSubmit" style="margin-top: 25px">
            <!-- <el-form-item prop="account">
              <el-select v-model="formData.account" @change="setupAccount" class="account-select">
                <el-option
                  v-for="account in accounts"
                  :key="account.key"
                  :label="account.label"
                  :value="account.key"
                >
                  <span>{{ account.label }}</span>
                </el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item prop="username">
              <el-input :placeholder="$t('login.placeholder[0]')" v-model.trim="formData.username" />
            </el-form-item>
            <el-form-item prop="password">
              <el-input :placeholder="$t('login.placeholder[1]')" v-model.trim="formData.password" type="password"
                radius="8px" autocomplete="off" />
            </el-form-item>
            <el-form-item prop="captcha">
              <el-input style="width: auto;margin-right: 10px;" :placeholder="$t('login.placeholder[3]')"
                v-model.trim="formData.captcha" type="text" radius="8px" autocomplete="off" />
              <img :src="codeUrl" @click="reload" style="cursor: pointer;float:right;" />
            </el-form-item>
            <div class="drag-verify">
              <div class="drag-verify-content" :class="{ error: !isPassing && isClickPass }">
                <ArtDragVerify ref="dragVerify" v-model:value="isPassing" :width="width < 500 ? 328 : 438"
                  :text="$t('login.sliderText')" textColor="var(--art-gray-800)"
                  :successText="$t('login.sliderSuccessText')" :progressBarBg="getCssVariable('--el-color-primary')"
                  background="var(--art-gray-200)" handlerBg="var(--art-main-bg-color)" @pass="onPass" />
              </div>
              <p class="error-text" :class="{ 'show-error-text': !isPassing && isClickPass }">{{
                $t('login.placeholder[2]')
              }}</p>
            </div>

            <div class="forget-password">
              <el-checkbox v-model="formData.rememberPassword">{{
                $t('login.rememberPwd')
              }}</el-checkbox>
              <router-link :to="RoutesAlias.ForgetPassword">{{
                $t('login.forgetPwd')
              }}</router-link>
            </div>

            <div style="margin-top: 30px">
              <el-button class="login-btn" type="primary" @click="handleSubmit" :loading="loading" v-ripple>
                {{ $t('login.btnText') }}
              </el-button>
            </div>

            <div class="footer">
              <p>
                {{ $t('login.noAccount') }}
                <router-link :to="RoutesAlias.Register">{{ $t('login.register') }}</router-link>
              </p>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import AppConfig from '@/config'
import { RoutesAlias } from '@/router/routesAlias'
import { ElMessage, ElNotification } from 'element-plus'
import { useUserStore } from '@/store/modules/user'
import { HOME_PAGE } from '@/router/routesAlias'
import { ApiStatus } from '@/utils/http/status'
import { getCssVariable } from '@/utils/colors'
import { languageOptions } from '@/language'
import { LanguageEnum, SystemThemeEnum } from '@/enums/appEnum'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
import { useSettingStore } from '@/store/modules/setting'
import type { FormInstance, FormRules } from 'element-plus'

type AccountKey = 'super' | 'admin' | 'user'

export interface Account {
  key: AccountKey
  label: string
  userName: string
  password: string
  roles: string[]
}
const codeUrl = ref()
const accounts = computed<Account[]>(() => [
  {
    key: 'super',
    label: t('login.roles.super'),
    userName: 'Super',
    password: '123456',
    roles: ['R_SUPER']
  },
  {
    key: 'admin',
    label: t('login.roles.admin'),
    userName: 'Admin',
    password: '123456',
    roles: ['R_ADMIN']
  },
  {
    key: 'user',
    label: t('login.roles.user'),
    userName: 'User',
    password: '123456',
    roles: ['R_USER']
  }
])

const settingStore = useSettingStore()
const { isDark, systemThemeType } = storeToRefs(settingStore)

const dragVerify = ref()

const userStore = useUserStore()
const router = useRouter()
const isPassing = ref(false)
const isClickPass = ref(false)

const systemName = AppConfig.systemInfo.name
const formRef = ref<FormInstance>()

const formData = reactive({
  account: '',
  username: '',
  password: '',
  captcha: '',
  rememberPassword: true
})

const rules = computed<FormRules>(() => ({
  username: [{ required: true, message: t('login.placeholder[0]'), trigger: 'blur' }],
  password: [{ required: true, message: t('login.placeholder[1]'), trigger: 'blur' }],
  captcha: [{ required: true, message: t('login.placeholder[3]'), trigger: 'blur' }]
}))

const loading = ref(false)
const { width } = useWindowSize()

// onMounted(() => {
//   setupAccount('super')
// })

// 设置账号
// const setupAccount = (key: AccountKey) => {
//   const selectedAccount = accounts.value.find((account: Account) => account.key === key)
//   formData.account = key
//   formData.username = selectedAccount?.userName ?? ''
//   formData.password = selectedAccount?.password ?? ''
// }

const onPass = () => { }

onMounted(() => {
  reload()
  })
const reload = () =>{
  getcaptcha()
}
  // 获取验证码
  const getcaptcha = async () => {
    try {
      const res = await UserService.captcha()
      // console.log(res.captcha,"1312")
      codeUrl.value= res.captcha
      // if (res.code === ApiStatus.success) {
      //   codeUrl.value= res
      // }
    } catch (error) {
      console.error('获取用户列表失败:', error)
      loading.value = false
    }
  }
// 登录
const handleSubmit = async () => {
  if (!formRef.value) return

  await formRef.value.validate(async (valid) => {
    if (valid) {
      if (!isPassing.value) {
        isClickPass.value = true
        return
      }

      loading.value = true

      const params = {
        username: formData.username,
        password: formData.password,
        captcha: formData.captcha
      }
      try {
        const res = await UserService.login(params)
        // reload()
        if (res.code === ApiStatus.success) {
          const { token, refreshToken } = res.data

          // userStore.setUserInfo(res.data)
          if (token) {
            userStore.setToken(token, refreshToken)
            // const res = await UserService.getUserInfo()

            // 设置登录状态
            userStore.setLoginStatus(true)
            // 登录成功提示
            showLoginSuccessNotice()

            if (res.code === ApiStatus.success) {
              userStore.setUserInfo(res.data)
              userStore.setLoginStatus(true)
              router.push(HOME_PAGE)
            } else {
              ElMessage.error(res.msg)
            }
          }
        } else {
          loading.value = false
          resetDragVerify()
        }
      } finally {
        loading.value = false
        resetDragVerify()
      }
    }
  })
}

// 重置拖拽验证
const resetDragVerify = () => {
  dragVerify.value.reset()
}

// 登录成功提示
const showLoginSuccessNotice = () => {
  setTimeout(() => {
    ElNotification({
      title: t('login.success.title'),
      type: 'success',
      duration: 2500,
      zIndex: 10000,
      message: `${t('login.success.message')}, ${systemName}!`
    })
  }, 150)
}

// 切换语言
const { locale } = useI18n()

const changeLanguage = (lang: LanguageEnum) => {
  if (locale.value === lang) return
  locale.value = lang
  userStore.setLanguage(lang)
}

// 切换主题
import { useTheme } from '@/composables/useTheme'
import { UserService } from '@/api/usersApi'

const toggleTheme = () => {
  let { LIGHT, DARK } = SystemThemeEnum
  useTheme().switchThemeStyles(systemThemeType.value === LIGHT ? DARK : LIGHT)
}
</script>

<style lang="scss" scoped>
@use './index';
</style>
